<template>
  <el-dialog :modelValue="visiable" title="新增" width="600" @close="$emit('close')">
    <div class="dialog-log">
      <el-form label-width="50px" :inline="false">
        <el-form-item label="日期">
          <el-text class="text-sm">{{ dayjs(data).format('YYYY年MM月DD日') }}</el-text>
        </el-form-item>

        <el-form-item label="记录">
          <el-input v-model="content" type="textarea" rows="15"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add">新增记录</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import useLog from '@renderer/composables/useLog'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const props = defineProps(['visiable', 'data'])
const emit = defineEmits(['close'])
const { add: addLog } = useLog()
const content = ref('')

const cancel = () => {
  emit('close')
}

const add = async () => {
  await addLog({
    date: props.data,
    content: content.value
  })
  ElMessage({
    type: 'success',
    message: '添加成功'
  })
  cancel()
}
</script>

<style lang="scss" scoped>
.dialog-comp {
  @apply mt-5;
}
</style>
